import React, { useState } from 'react';
import { Dropdown, Space, Modal, Input, notification } from 'antd';
import { QuestionCircleOutlined, UserOutlined, SettingOutlined } from '@ant-design/icons';
import { Outlet, useNavigate } from 'react-router-dom'
import { NavLink } from 'react-router-dom'
import './Header.scss'
import './Header.css'
import { user_list2 } from '../../api/index'
interface props {

}
function Headers(props: props) {
  var user = localStorage.getItem('user')
  // 实例化路由对象
  var navigate = useNavigate();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const dropmenuitems: any = [
    {
      key: '1',
      label: <a target="_blank" rel="noopener noreferrer"> 用户资料 </a>,
    },
    {
      key: '2',
      label: <a onClick={() => { exit3() }} target="_blank" rel="noopener noreferrer"> 修改密码 </a>,
    },
    {
      key: '3',
      label: <a rel="noopener noreferrer"> 设置 </a>
    }
  ];
  const dropmenuitems2: any = [
    {
      key: '1',
      label: <a onClick={() => { exit() }} target="_blank" rel="noopener noreferrer"> 退出登录 </a>,
    },
    {
      key: '2',
      label: <a onClick={() => { exit2() }} target="_blank" rel="noopener noreferrer"> 切换用户 </a>,
    },
  ];
  //退出登录
  var exit = () => {
    localStorage.removeItem('token')
    localStorage.removeItem('user')
    navigate('/login');
  }
  // 切换用户
  var exit2 = () => {
    localStorage.removeItem('token')
    localStorage.removeItem('user')
    navigate('/login');
  }
  // 用户名
  var [pwd, setPwd] = useState('')
  //  密码
  var [password, setPassword] = useState('')
  // 修改密码
  var exit3 = () => {
    setIsModalOpen(true);
  }
  // 修改提交按钮
  const handleOk = () => {
    if (pwd == '') {
      return notification.open({
        message: '提醒',
        description:
          '输入原密码',
        duration: 1,
      })
    }
    var obj = {
      username: user,
      password: password
    }
    user_list2(obj).then((res) => {
      console.log(res);

    })
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div className='Headers'>
      <div className='header'>
        <p>西安市政务服务管理平台</p>
        <div className='dingbu'>
          <NavLink className='dingbu1' to="/index/table" state={['工作台']}>  工作台</NavLink>
          <NavLink className='dingbu1' to="/index/management" state={['工作台', '事项管理']}> 事项管理 </NavLink>
          <NavLink className='dingbu1' to="/index/response" state={['工作台', '互动反馈']}>  互动反馈</NavLink>
          <NavLink className='dingbu1' to="/index/Information" state={['工作台', '信息发布']}> 信息发布 </NavLink>
          <NavLink className='dingbu1' to="/index/dataanalysis">  数据分析</NavLink>
        </div>
        <div className='djl'>
          <Dropdown menu={{ items: dropmenuitems }}>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                <UserOutlined /> {localStorage.getItem('user')}
                <Modal title="修改密码" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} cancelText='取消修改' okText='提交修改'>
                  <div className='inp'>
                    <Input size="large" placeholder="用户名" prefix={<UserOutlined />} defaultValue={user || ''} disabled />
                  </div>
                  <div className='inp'>
                    <Input.Password size="large" placeholder="原密码" prefix={<UserOutlined />} value={pwd} onChange={(e) => { setPwd(e.target.value) }} />
                  </div>
                  <div className='inp'>
                    <Input.Password size="large" placeholder="修改密码" prefix={<UserOutlined />} value={password} onChange={(e) => { setPassword(e.target.value) }} />
                  </div >
                </Modal>
              </Space>
            </a>
          </Dropdown>
          <Dropdown menu={{ items: dropmenuitems2 }}>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                <SettingOutlined />
              </Space>
            </a>
          </Dropdown>
        </div>
      </div>
      <Outlet />
    </div>
  );
}

export default Headers;